import React from 'react'
import styles from './index.module.scss'
import { Outlet, useNavigate } from 'react-router-dom'
import { homeRouters } from '../../router'
import { TabBar } from 'antd-mobile'
function Index() {
  const navigate = useNavigate()
  return (
    <div className={styles.box_wroe}>
      <main>
        <Outlet></Outlet>
      </main>
      <footer>
        <TabBar onChange={(key) => navigate(key)}>
          {homeRouters.map(item => (
            <TabBar.Item key={item.path} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </footer>
    </div>
  )
}

export default Index
